<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>/home/zjh/git/Koala-UI/KoalaUI/WebContent/lib/Koala_Select.js</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
    <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
    <script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">

<div id="doc">
    <div id="hd" class="yui3-g header">
        <div class="yui3-u-3-4">
            
                <h1><img src="../assets/css/logo.png" title=""></h1>
            
        </div>
        <div class="yui3-u-1-4 version">
            <em>API Docs for: </em>
        </div>
    </div>
    <div id="bd" class="yui3-g">

        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
    <h2 class="off-left">APIs</h2>
    <div id="api-tabview" class="tabview">
        <ul class="tabs">
            <li><a href="#api-classes">Classes</a></li>
            <li><a href="#api-modules">Modules</a></li>
        </ul>

        <div id="api-tabview-filter">
            <input type="search" id="api-filter" placeholder="Type to filter APIs">
        </div>

        <div id="api-tabview-panel">
            <ul id="api-classes" class="apis classes">
            
                <li><a href="../classes/Accordion.html">Accordion</a></li>
            
                <li><a href="../classes/AutoComplete.html">AutoComplete</a></li>
            
                <li><a href="../classes/Button.html">Button</a></li>
            
                <li><a href="../classes/Carousel.html">Carousel</a></li>
            
                <li><a href="../classes/ColorPicker.html">ColorPicker</a></li>
            
                <li><a href="../classes/Combobox.html">Combobox</a></li>
            
                <li><a href="../classes/DateTimePicker.html">DateTimePicker</a></li>
            
                <li><a href="../classes/Grid.html">Grid</a></li>
            
                <li><a href="../classes/ListView.html">ListView</a></li>
            
                <li><a href="../classes/Popover.html">Popover</a></li>
            
                <li><a href="../classes/ProgressBar.html">ProgressBar</a></li>
            
                <li><a href="../classes/RichTextEditor.html">RichTextEditor</a></li>
            
                <li><a href="../classes/ScrollSpy.html">ScrollSpy</a></li>
            
                <li><a href="../classes/Select.html">Select</a></li>
            
                <li><a href="../classes/SideBar.html">SideBar</a></li>
            
                <li><a href="../classes/Slider.html">Slider</a></li>
            
                <li><a href="../classes/Spinner.html">Spinner</a></li>
            
                <li><a href="../classes/Tab.html">Tab</a></li>
            
                <li><a href="../classes/ToolBar.html">ToolBar</a></li>
            
                <li><a href="../classes/Tooltip.html">Tooltip</a></li>
            
                <li><a href="../classes/Tree.html">Tree</a></li>
            
                <li><a href="../classes/Wizard.html">Wizard</a></li>
            
            </ul>

            <ul id="api-modules" class="apis modules">
            
            </ul>
        </div>
    </div>
</div>

            </div>
        </div>
        <div class="yui3-u-3-4">
                <div id="api-options">
        Show:
        <label for="api-show-inherited">
            <input type="checkbox" id="api-show-inherited" checked>
            Inherited
        </label>

        <label for="api-show-protected">
            <input type="checkbox" id="api-show-protected">
            Protected
        </label>

        <label for="api-show-private">
            <input type="checkbox" id="api-show-private">
            Private
        </label>
        <label for="api-show-deprecated">
            <input type="checkbox" id="api-show-deprecated">
            Deprecated
        </label>

    </div>


            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <h1 class="file-heading">File: /home/zjh/git/Koala-UI/KoalaUI/WebContent/lib/Koala_Select.js</h1>

<div class="file">
    <pre class="code prettyprint linenums">
/*
*选择框组件
*/
+function($){

	&quot;use strict&quot; ;
	
	/**
	 * 选择框组件
	 * @class Select
	 * @constructor 
	 * @example
	 * 	js代码
	 * 	var contents = [
			{value:1,title:&quot;第一个&quot;,selected:true},
			{value:2,title:&quot;第二个&quot;,selected:false},
			{value:3,title:&quot;第三个&quot;,selected:false},
		];
		$(function(){
			$(&quot;#mySelect&quot;).select({
				contents:contents
			});
		})
		
		html相关代码
		&lt;div id=&quot;mySelect&quot;&gt;&lt;/div&gt;
	 */
	var Select = function(element, options){
		this.$element = $(element);
		this.options = options;
		this.$element.html(Select.DEFAULTS.TEMPLATE);
		this.$element.addClass(&quot;input-group&quot;).addClass(&quot;combobox&quot;);
        this.$button = this.$element.find(&#x27;[data-toggle=&quot;button&quot;]&#x27;);
		this.$items = this.$element.find(&#x27;.dropdown-menu&#x27;);
		this.$item = this.$element.find(&#x27;[data-toggle=&quot;item&quot;]&#x27;);
		this.$value = this.$element.find(&#x27;[data-toggle=&quot;value&quot;]&#x27;);
		this.init();
	};
	Select.DEFAULTS = {
		/**
		 * 下拉框内容
		 * @property contents
		 * @type {Array}
		 * @default []
		 * @example
		 * 	var contents = [
				{value:1,title:&quot;第一个&quot;,selected:true},
				{value:2,title:&quot;第二个&quot;,selected:false},
				{value:3,title:&quot;第三个&quot;,selected:false},
			];
			$(function(){
				$(&quot;#mySelect&quot;).select({
					contents:contents
				});
			})
		 */
		contents:[]
	};
	Select.prototype = {
		Constructor: Select,
		init: function(){
			var self = this;
            this.$button.on(&#x27;click&#x27;, function(){
                self.$element.toggleClass(&#x27;open&#x27;);
            });
            this.$item.on(&#x27;click&#x27;, function(){
                self.$element.toggleClass(&#x27;open&#x27;);
            });
			this.$item.html(self.options.title);
			var contents = self.options.contents;
			if(contents &amp;&amp; contents.length){
				self.setItems(contents);
			}
			this.setDefaultSelection();
			self.$items.on(&#x27;mouseleave&#x27;, function(){
				self.$element.removeClass(&#x27;open&#x27;);
			});
		},
		setItems: function(contents){
			var self = this;
			var items = new Array();
			for(var i = 0, j = contents.length; i &lt; j; i++){
				var content =  contents[i];
				var li = &quot;&quot;;
				if(content.selected){
					li = &#x27;&lt;li data-value=&quot;&#x27; + content.value + &#x27;&quot; class=&quot;selected&quot;&gt;&lt;a href=&quot;#&quot;&gt;&#x27; + content.title + &#x27;&lt;/a&gt;&lt;/li&gt;&#x27;;
				}else{
					li = &#x27;&lt;li data-value=&quot;&#x27; + content.value + &#x27;&quot;&gt;&lt;a href=&quot;#&quot;&gt;&#x27; + content.title + &#x27;&lt;/a&gt;&lt;/li&gt;&#x27;;
				}
				items.push(li);
			}
			self.$items.html(items.join(&#x27; &#x27;));
			if(self.$items.find(&#x27;li&#x27;).length &gt; 5){
				self.$items.css({&#x27;height&#x27;: &#x27;130px&#x27;, &#x27;overflow-y&#x27;: &#x27;auto&#x27;});
			}
			self.$items.find(&#x27;li&#x27;).on(&#x27;click&#x27;, function(e){
				e.preventDefault();
				self.clickItem($(this));
			});
			return self.$element;
		},
		clickItem: function($item){
            this.$element.removeClass(&#x27;open&#x27;);
            this.$button.removeClass(&#x27;active&#x27;);
			var value = $item.data(&#x27;value&#x27;);
			if(this.$value.val() == value){
				return this.$element;
			}
			this.$item.html($item.find(&#x27;a:first&#x27;).html());
			this.$value.val(value);
			this.$element.trigger(&#x27;change&#x27;).popover(&#x27;destroy&#x27;).parent().removeClass(&#x27;has-error&#x27;);
			return  this.$element;
		},
		getValue: function(){
			return this.$value.val();
		},
		getItem: function(){
			return this.$item.html();
		},
		selectByValue: function(value){
			return this.selectBySelector(&#x27;li[data-value=&quot;&#x27;+value+&#x27;&quot;]&#x27;);
		},
		selectByIndex: function(index){
			return this.selectBySelector(&#x27;li:eq(&#x27;+index+&#x27;)&#x27;);
		},
		selectBySelector: function(selector){
			return this.clickItem(this.$items.find(selector));
		},
		setDefaultSelection: function(){
			return this.selectBySelector(&#x27;li.selected&#x27;);
		}
	};
	Select.DEFAULTS.TEMPLATE = &#x27;&lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; data-toggle=&quot;item&quot;&gt;&#x27; +
		&#x27;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-default dropdown-toggle&quot; data-toggle=&quot;button&quot;&gt;&#x27; +
		&#x27;&lt;span class=&quot;caret&quot;&gt;&lt;/span&gt;&#x27; +
		&#x27;&lt;/button&gt;&#x27; +
		&#x27;&lt;input type=&quot;hidden&quot; data-toggle=&quot;value&quot;/&gt;&#x27; +
		&#x27;&lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot;&gt;&lt;/ul&gt;&#x27;;
	$.fn.getValue = function(){
		if($(this).data(&#x27;koala.select&#x27;)){
			return $(this).data(&#x27;koala.select&#x27;).getValue();
		}
	};
	$.fn.getItem = function(){
		if($(this).data(&#x27;koala.select&#x27;)){
			return $(this).data(&#x27;koala.select&#x27;).getItem();
		}
	};
	$.fn.setValue = function(value){
		if($(this).data(&#x27;koala.select&#x27;)){
			return $(this).data(&#x27;koala.select&#x27;).selectByValue(value);
		}
	};
	$.fn.setSelectItems = function(contents){
		if($(this).data(&#x27;koala.select&#x27;)){
			return $(this).data(&#x27;koala.select&#x27;).setItems(contents);
		}
	};
	$.fn.appendItems = function(contents){
		return $(this).data(&#x27;koala.select&#x27;).setItems(contents);
	};
	$.fn.resetItems = function(contents){
		$(this).data(&#x27;koala.select&#x27;).$item.empty();
		return $(this).data(&#x27;koala.select&#x27;).setItems(contents);
	};
	var old = $.fn.select;
	$.fn.select = function(option){
		return this.each(function(){
			var $this = $(this);
			var data = $this.data(&#x27;koala.select&#x27;);
			var options = $.extend({}, Select.DEFAULTS, $this.data(), typeof option == &#x27;object&#x27; &amp;&amp; option);
			if(!data){
				$this.data(&#x27;koala.select&#x27;, (data = new Select(this, options)));
			}
			if(typeof option == &#x27;string&#x27;){
				data[option]();
			}
		});
	};
	$.fn.select.Constructor = Select;
	$.fn.select.noConflict = function(){
		$.fn.select = old;
		return this;
	};
}(window.jQuery);
    </pre>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>
